<template>
  <div>
    <svg-icon :icon-class="'theme-b'" class="theme-change" @click="click" />
    <el-drawer
      title="布局管理"
      :visible.sync="drawer"
      :modal="false"
      :with-header="false"
    >
      <div class="header-body">
        <div class="header-line" :style="background">
          布局管理
        </div>
        <div v-for="object in layouts" :key="object.id" class="theme-li">
          <div class="theme-body" :class="object.sfqy == true?'active':''">
            <div class="default-icon">
              <i class="el-icon-check" />
            </div>
            <div class="theme-title">
              {{ object.title }}
            </div>
            <div class="theme-image">
              <el-image :src="layoutNotActive" class="theme-img" />
            </div>
            <div class="theme-title">
              <el-button type="text" size="small" @click="updateUserLayout(object)">布局修改</el-button>
              <el-button type="text" size="small" @click="deleteUserLayout(object)">删除布局</el-button>
              <el-button type="text" size="small" @click="setDefaultLayout(object)">设置默认</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog
      width="30%"
      title="布局修改"
      :visible.sync="innerVisible"
      append-to-body
    >
      <el-form ref="form" :rules="rules" :inline="true" :model="form" size="small" label-width="120px">
        <el-form-item label="模版名称" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="字体颜色" prop="defColor">
          <el-color-picker v-model="form.defColor" />
        </el-form-item>
        <el-form-item label="背景颜色" prop="defBackgroundColor">
          <el-color-picker v-model="form.defBackgroundColor" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveObject">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import set from '@/assets/images/set.png'
import layoutActive from '@/assets/images/layout.png'
import layoutNotActive from '@/assets/images/layout-no.png'
import {
  loadUserLayout,
  setDefaultLayout,
  deleteUserCustomLayout,
  updateUserCustomLayout
} from '@/api/index/user/userCenter'

export default {
  name: 'Index',
  data() {
    return {
      drawer: false,
      innerVisible: false,
      layoutActive: layoutActive,
      layoutNotActive: layoutNotActive,
      background: {
        backgroundImage: 'url(' + set + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '25px 25px',
        backgroundPosition: '10px 1px'
      },
      layouts: [],
      rules: {
        title: [{ required: true, message: '请输入布局名称', trigger: 'blur' }]
      },
      form: {}
    }
  },
  methods: {
    click() {
      this.drawer = true
      this.init()
    },
    init() {
      loadUserLayout().then(res => {
        this.layouts = res.dataList
      }).catch(error => {
        console.log(error)
      })
    },
    updateUserLayout(object) {
      if (object.isDefault === true) {
        this.$message({
          message: '系统默认布局，无法更改名称',
          type: 'warning'
        })
      } else {
        this.innerVisible = true
        this.form = object
      }
    },
    saveObject() {
      updateUserCustomLayout(this.form).then(res => {
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        location.reload()
        this.innerVisible = false
      }).catch(() => {
        this.$message({
          message: '修改名称失败！',
          type: 'warning'
        })
        this.innerVisible = false
      })
    },
    deleteUserLayout(object) {
      if (object.isDefault === true) {
        this.$message({
          message: '系统默认布局，无法删除',
          type: 'warning'
        })
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUserCustomLayout({ 'lid': object.id }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            location.reload()
          }).catch(() => {
            this.$message({
              message: '删除失败！',
              type: 'warning'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    setDefaultLayout(object) {
      this.$confirm('确定将此布局设置为默认布局?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setDefaultLayout({ 'lid': object.id }).then(res => {
          location.reload()
        }).catch(() => {
          this.$message({
            message: '设置默认布局失败！',
            type: 'warning'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消设置'
        })
      })
    }
  }
}
</script>

<style scoped>
.theme-change {
  font-size: 20px;
  margin-top: 10px;
  cursor: pointer;
}

.header-line {
  width: 100%;
  height: 40px;
  line-height: 30px;
  border-bottom: 1px solid #eeeeee;
  letter-spacing: 2px;
  text-align: left;
  text-indent: 50px;

}

.header-body {
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
}

.theme-li {
  width: 50%;
  height: 140px;
  padding: 10px;
  box-sizing: border-box;
  float: left;
}

.theme-body {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  position: relative;
}

.theme-image {
  height: 60px;
  text-align: center;
}

.theme-title {
  width: 100%;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #8a8a8a;
}

.active .theme-title {
  color: #222222;
}

.default-icon {
  position: absolute;
  right: 15px;
  top: 12px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  color: #ffffff;
  background-color: #9b9b9b;
  border-radius: 13px;
}

.active .default-icon {
  background-color: #67C23A;
}
</style>
